<template>
 <div class="historyLine-container">
   <div class="title">
     <span>路线列表</span>
     <i class="el-icon-close"
        @click="closeList"
     ></i>
   </div>
   <div class="contain">
     <!--表格-->
     <el-table
         :data="lineData"
         style="width: 100%"
         border stripe>
       <el-table-column
           prop="id"
           label="id"
           width="50">
       </el-table-column>
       <el-table-column
           prop="position_name"
           label="线路名"
           width="130">
       </el-table-column>
       <el-table-column
           prop="created_at"
           width="150"
           label="添加时间">
       </el-table-column>
       <el-table-column
           label="操作"
           width="225"
       >
         <template v-slot="{ row }">
           <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateName(row.id)"></el-button>
           <el-button type="primary" icon="el-icon-delete" size="mini" @click="delPosition(row.id)"></el-button>
           <el-button type="primary" icon="el-icon-check" size="mini" @click="usePosition(row.id)"></el-button>
         </template>
       </el-table-column>
     </el-table>
     <!--分页-->
     <el-pagination
         @size-change="handleSizeChangeFn"
         @current-change="handleCurrentChangeFn"
         :current-page.sync="p.currentpage"
         :page-sizes="[4,8]"
         :page-size.sync="p.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
     >
     </el-pagination>
   </div>
 </div>
</template>

<script>
import {getlist,updateName,delPosition,getLine} from '@/api'
import global from "@/views/Global.vue"
export default {
  props:['closeHistory'],
  data(){
    return{
      lineData:[],
      total:0,
      // 查询参数对象
      p:{
        currentpage: 1,
        pagesize: 4,
        userid:''
      },
      lindata:[]
    }
  },
  mounted() {
    setTimeout(()=>{
      this.p.userid = JSON.parse(localStorage.getItem('memory')).userInfo.id
      this.initList()
    })
  },
  methods: {
    sendMessage(msg, type) {
      this.$notify({
        title: msg,
        position: 'top-right',
        type: type,
        offset: 200
      });
    },
    initList() {
      getlist(this.p).then(res => {
        const data = res.data
        if (data.code === 200) {
          //this.sendMessage('获取列表成功!','success')
          this.lineData = data.data[0]
          this.lineData.forEach(item => {
            item.created_at = item.created_at.slice(0, 10)
          })
          this.total = data.data[2]
        }
      })
    },
    handleSizeChangeFn(newSize) {
      // 为 pagesize 赋值
      this.p.pagesize = newSize
      // 默认展示第一页数据
      this.p.currentpage = 1
      // 重新发起请求
      this.initList()
    },
    handleCurrentChangeFn(newPage) {
      // 为页码值赋值
      this.p.currentpage = newPage
      // 重新发起请求
      this.initList()
    },
    closeList() {
      this.$emit('closeHistory')
    },
    updateName(id) {
      const newName = prompt('请输入新名字')
      const data = {
        id,
        newName,
      }
      if (newName) {
        updateName(data).then(res => {
          const data = res.data
          if (data.code == 200) {
            this.sendMessage('修改成功!', 'success')
            this.initList()
            return
          } else if (data.code == 401) {
            this.sendMessage('不能与原名称重复', 'error')
            return
          } else if (data.code == 404) {
            this.sendMessage('线路id无效，请刷新后重试', 'error')
            return
          } else if (data.code == 400 || data.code == 402) {
            this.sendMessage('修改失败，请重试', 'error')
            return
          }
        })
      } else {
        this.sendMessage('路线名不能为空', 'error')
      }
    },
    delPosition(id) {
      const res = confirm('确定删除路线数据?')
      const data = {id}
      if (res) {
        delPosition(data).then(res => {
          const data = res.data
          console.log(data)
          if (data.code == 200) {
            this.sendMessage('删除成功!', 'success')
            this.initList()
            return
          } else if (data.code == 404) {
            this.sendMessage('线路id无效，请刷新后重试', 'error')
          } else if (data.code == 400) {
            this.sendMessage('修改失败，请重试', 'error')
            return
          }
        })
      } else {
        return
      }
    },
    usePosition(id) {
      const _this = this
      const viewer = global.viewer
      global.linePlayback = []
      viewer.entities.removeAll()
      getLine({id}).then(res=>{
        if(res.data.code == 200){
          this.lindata = JSON.parse(res.data.data.position_data)
          const line = this.lindata
          for (let i = 0;i <= line.length;i++){
            viewer.entities.add({
              position:line[i],
              point: {
                pixelSize: 5,
                color: Cesium.Color.WHITE,
                outlineColor: Cesium.Color.DEEPSKYBLUE,
                outlineWidth: 3,
                clampToGround:true,
                zIndex:9999,
                disableDepthTestDistance:50000
              }
            })
          }
          viewer.entities.add({
            polyline: {
              // Cesium.Cartesian3.fromDegreesArray([经度1, 纬度1, 经度2, 纬度2,])
              // Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2])
              // 如果有高度，上面的 polyline_point_arr 里面要增加高度的
              positions: line,
              // 宽度
              width: 2,
              // 线的颜色
              material: Cesium.Color.YELLOW,
              // 是否显示
              show: true,
              // 是否贴地
              clampToGround:true
            }
          })
          for (let j = 0;j <= this.lindata.length-1; j++){
            //准备数据
            console.log(this.lindata[j])
            var cartographic = Cesium.Cartographic.fromCartesian(_this.lindata[j])
            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
            global.linePlayback.push([longitudeString,latitudeString,450])
            console.log(global.linePlayback)
          }
          _this.closeList()
        } else {
          this.sendMessage('获取线路失败','error')
        }
      })

    },
  }
}
</script>

<style scoped lang="less">
.historyLine-container{
  position: absolute;
  left: 32vw;
  top: 31vh;
  height: auto;
  width: auto;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: 2px solid #60cdad;
  z-index: 999;
  .title{
    display: flex;
    justify-content: space-between;
    padding: 1vh 1.5vh;
    color: rgba(0,0,0,1);
    span{
      font-size: 1.8vh;
    }
    i{
      cursor: pointer;
    }
  }
  .contain{
    color: black;
  }
}
</style>